<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /**
     * 首先webpack热更新分为两个大模块 1 服务器模块 2 浏览器模块
     * 1 代码修改保存
     * 2 触发监视器
     * 3 webpack重新打包
     * 4 通过中间件 webpack-dev-middleware 调用webpack Api对代码进行监控
     * 5 webpack-dev-server 通过socketjs和webpackclient端进行通信 将打包后的信息传递到webpack-dev-server/client下，这一步主要是将打包后会生成hash值以便于后续被JSON main template runtime调用获取hash值来进行代码替换
     * 6 webpack-dev-server/client接到后并不能处理这些信息 而是要把信息重新传递给webpack/hot/dev-server来确定是刷新浏览器还是代码替换
     * 7 如果代码替换的话就需要使用HMR replace替换代码
     * 8 HMR replace替换代码原理就是通过JSON main template runtime 调用ajax到webpack-dev-server中拿hash值然后获取到后再通过jsonp请求获取到最新代码
     * 9 最后一步就是HMR根据获取过来后的最新代码进行新旧对比 进行更替代码 
     * 10 如果更新失败就回退到前一步进行浏览器刷新
     *  
     * 简单来说就是：hot-module-replacement-plugin 包给 webpack-dev-server 提供了热更新的能力，它们两者是结合使用的，单独写两个包也是出于功能的解耦来考虑的。
1）webpack-dev-server(WDS)的功能提供 bundle server的能力，就是生成的 bundle.js 文件可以通过 localhost://xxx 的方式去访问，另外 WDS 也提供 livereload(浏览器的自动刷新)。
2）hot-module-replacement-plugin 的作用是提供 HMR 的 runtime，并且将 runtime 注入到 bundle.js 代码里面去。一旦磁盘里面的文件修改，那么 HMR server 会将有修改的 js module 信息发送给 HMR runtime，然后 HMR runtime 去局部更新页面的代码。因此这种方式可以不用刷新浏览器。
    */
  </script>
</body>
</html>